<template>
  <div class="container">
    <el-card>
      <!-- 导航区域 -->
      <el-breadcrumb class="arrow" v-if="$route.query.id && $route.query.name">
        <el-breadcrumb-item>科学管理</el-breadcrumb-item>
        <el-breadcrumb-item >{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-form v-model="listInfo.state" :inline="true" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-input v-model="listInfo.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listInfo.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="eliminate">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>

        <el-button
          @click="dialogVisible = true"
          type="success"
          icon="el-icon-edit"
          class="el-icon--right"
          >新增目录</el-button
        >
        <el-button class="editButton" type="text" v-if="$route.query.id&&$route.query.name" @click="$router.back()" >←返回学科</el-button>
      </el-form>
      <!-- 警告区域 -->
      <el-alert
        :title="'数据一共' + total + '条'"
        type="info"
        show-icon
      ></el-alert>
      <!-- 主体内容 -->
      <el-table :data="tableData" class="table">
        <el-table-column
          label="序号"
          type="index"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
        ></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>

        <el-table-column prop="" label="创建日期" width="150">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTime }}
          </template>
        </el-table-column>

        <el-table-column prop="totals" label="面试题数量" ></el-table-column>

        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>

        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="getChangeState(scope.row)">
              {{ scope.row.state === 1 ? "禁用" : "启用" }}
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="getUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              slot="reference"
              type="text"
              :disabled="scope.row.state === 1"
              @click="getRemove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="pageSizeChange"
          @current-change="CurrentPageChange"
          :current-page="listInfo.page"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="listInfo.pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增用户 -->
    <el-dialog title="新增目录" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="addForm"
        ref="addUserFormRef"
        :inline="true"
        :rules="addUserFormRules"
      >
        <el-form-item label="所属学科" :label-width="formLabelWidth"  v-if="!$route.query.id && !$route.query.name">
          <el-select
            style="width: 100%"
            v-model="addForm.subjectID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          :label-width="formLabelWidth"
          prop="directoryName"
        >
          <el-input
            v-model="addForm.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUsers">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改表格数据弹框 -->
    <el-dialog title="修改目录" :visible.sync="updateDialog" width="30%">
      <el-form
        :model="editInfo"
        ref="editFormRef"
        :inline="true"
        :rules="addUserFormRules"
      >
        <el-form-item label="所属学科" :label-width="formLabelWidth"  v-if="!$route.query.id && !$route.query.name">
          <el-select
            style="width: 100%"
            v-model="editInfo.subjectID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          :label-width="formLabelWidth"
          prop="directoryName"
        >
          <el-input
            v-model="editInfo.directoryName"
            placeholder="请输入目录名称"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialog=false">取 消</el-button>
        <el-button type="primary" @click="putUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, changeState, remove, update } from '@/api/hmmm/directorys.js'

import { list as subList } from '@/api/hmmm/subjects.js'

export default {
  data () {
    return {
      listInfo: {
        page: 1,
        pageSize: 10,
        state: null,
        directoryName: ''
      },
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      addForm: {
        directoryName: '',
        subjectID: ''
      },
      editInfo: {
        directoryName: '',
        subjectID: '',
        id: ''
      },
      addUserFormRules: {
        directoryName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      },
      value: '',
      tableData: [],
      total: 0,
      dialogVisible: false,
      formLabelWidth: '100px',
      subject: [],
      updateDialog: false
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.name) {
      this.subjectGetIn()
    } else {
      this.loadAllChannels()
    }
    this.subAllChannels()
  },
  methods: {
    // 学科进入显示
    subjectGetIn () {
      if (this.$route.query.id && this.$route.query.name) {
        // 学科进来的额渲染函数
        this.getInList()
      }
    },
    search () {
      if (!this.$route.query.id && !this.$route.query.name) {
        this.loadAllChannels()
      } else {
        this.getInList()
      }
    },

    // 当从学科管理进来的时候的页面数据渲染函数
    async getInList () {
      this.listInfo.subjectID = +this.$route.query.id
      const { data } = await list(this.listInfo)
      this.tableData = data.items
      this.total = data.counts
      // console.log(data.items)
      // 筛选传过来的ID与获取数据的数组中的subjectID,如果是一样的就显示到页面当中
      // this.tableData = data.items.filter(item => {
      //   return item.subjectID === +this.$route.query.id
      // })
    },
    // 列表数据
    async loadAllChannels () {
      const { data } = await list(this.listInfo)
      this.tableData = data.items
      this.directoryName = data.items.directoryName
      this.total = data.counts
      // console.log(data)
    },
    // 清除按钮
    eliminate () {
      this.listInfo.state = null
      this.listInfo.directoryName = ''
      if (!this.$route.query.id && !this.$route.query.name) {
        this.loadAllChannels()
      } else {
        this.getInList()
      }
    },
    pageSizeChange (size) {
      this.listInfo.pagesize = size
      this.listInfo.page = 1
      if (!this.$route.query.id && !this.$route.query.name) {
        this.loadAllChannels()
      } else {
        this.getInList()
      }
    },
    CurrentPageChange (page) {
      this.listInfo.page = page
      if (!this.$route.query.id && !this.$route.query.name) {
        this.loadAllChannels()
      } else {
        this.getInList()
      }
    },
    // 添加目录
    async addUsers () {
      this.$refs.addUserFormRef.validate(async (valid) => {
        if (valid && !this.$route.query.id) {
          await add(this.addForm)
          this.$message({
            message: '添加用户成功',
            type: 'success'
          })
          this.addForm.directoryName = ''
          this.addForm.subjectID = ''
          this.dialogVisible = false
        }
        if (!this.$route.query.id) {
          this.loadAllChannels()
        } else {
          this.addForm.subjectID = +this.$route.query.id
          await add(this.addForm)
          this.$message({
            message: '添加用户成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.addForm.directoryName = ''
          this.addForm.subjectID = ''
          this.getInList()
        }

        // if (valid && !this.$route.query.id) {
        //   await add(this.addForm)
        //   this.$message({
        //     message: '添加用户成功',
        //     type: 'success'
        //   })
        //   this.addForm.directoryName = ''
        //   this.addForm.subjectID = ''
        //   this.dialogVisible = false
        //   this.loadAllChannels()
        // } else if (valid && this.$route.query.id) {
        //   this.addForm.subjectID = '16'
        //   await add(this.addForm)
        //   this.getInList()
        // }
      })
    },
    // 获取学科列表
    async subAllChannels () {
      try {
        const { data } = await subList()
        // console.log(res,"xueke");
        this.subject = data.items
        // console.log(this.subject)
      } catch (error) {
        this.$message({
          message: '获取学科列表失败',
          type: 'error'
        })
      }
    },
    // 目录状态
    async getChangeState (index) {
      await changeState({
        id: index.id,
        state: index.state === 0 ? 1 : 0
      })
      if (!this.$route.query.id && !this.$route.query.name) {
        this.loadAllChannels()
      } else {
        this.getInList()
      }
    },
    // 删除数据
    async getRemove (index) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({
            id: index.id
          })
          // console.log(data)
          if (!this.$route.query.id && !this.$route.query.name) {
            this.loadAllChannels()
          } else {
            this.getInList()
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message('已取消删除')
        })
    },
    // 获取修改数据
    async getUpdate (item) {
      this.updateDialog = true
      this.editInfo.directoryName = item.directoryName
      this.editInfo.subjectID = item.subjectID
      this.editInfo.id = item.id
      // console.log(item)
    },
    // 修改目录
    async putUpdate () {
      await update(this.editInfo)
      // console.log(data)
      this.updateDialog = false

      if (!this.$route.query.id && !this.$route.query.name) {
        this.loadAllChannels()
      } else {
        this.getInList()
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  color: #fff;
  padding: 10px 10px;
}
.arrow {
  padding: 5px 0 20px 0;
}
.el-icon--right {
  float: right;
}
.table {
  padding: 15px 0;
}
.pagination {
  float: right;
}
.table {
  width: 100%;
}
.container {
  min-width: 1090px;
}
.editButton {
  border: 0;
  float: right;
  margin-right: 20px;
}
</style>
